create-react-app

react-native를 쓰면서 정말 좋았던 것 중에 하나는 react-native 명령어로 react-native app을 직접 만들 수 있다는 것이었습니다. 그걸 보고 거꾸로 react에도 내가 일일이 boilerplate를 설정하지 말고 그냥 명령어로 만들면 좋겠다. 라고 생각했었습니다.

이런 내 마음을 읽은 것일까요?

facebookincubator에서 create-react-app 프로젝트를 내 놓았습니다.

2016/07/27 Best Project

facebookincubator/create-react-app
_create-react-app - Create React apps with no build configuration._github.com


설치

$npm install -g create-react-app

실행

$create-react-app my-app  
$cd may-app  
$npm start

정말 간단하네요.

watchify도 적용되어 있는 거 같습니다. 바로 저장하자마자 뿅~

deep inside

create-react-app으로 설치를 하고 나면 기본적으로

와 같은 구조의 파일들이 생깁니다.

package.json을 살펴보면

{  
"name": "my-app",  
"version": "0.0.1",  
"private": true,  
"devDependencies": {  
"react-scripts": "0.1.0"  
},  
"dependencies": {  
"react": "^15.2.1",  
"react-dom": "^15.2.1"  
},  
"scripts": {  
"start": "react-scripts start",  
"build": "react-scripts build",  
"eject": "react-scripts eject"  
}  
}

형태의 간단한 프로젝트가 생성이 됩니다.

dependency가 react 만 가지게 되어 있고 dev-dependencies를 살펴보니 react-script 라는 녀석이 있습니다.

react-script를 살펴보았습니다.

babel, webpack, eslint등의 많은 일들을 해 주고 있습니다.

즉 create-react-app이라는 것은 보일러 플레이트 메이커 정도로 이해하면 될 거 같습니다.

$npm build

명령어를 통해서 production 레벨의 스크립트로 만들어 주는 부분들도 지원을 합니다.

react-script라는 녀석이 깃헙에 있을까 찾아보았는데 그게 보이지는 않고 create-react의 devDependency오 동일한걸 보니 파일들을 생성하는 역할만으로 끝인듯 합니다.

By Keen Dev on July 27, 2016.

Exported from Medium on May 31, 2017.